<template>
    <div class="daily-logs">
        <div class="daily-log-main">
            <MarkPreview :dailyLog="dailyLog" />
        </div>
        <!-- <div class="animate__heartBeat daily-log-aside">
            
        </div> -->

    </div>

</template>

<script setup lang="ts" name="DailyLogs">
import { ref, reactive } from 'vue';
import ArticleCard from '../utils/ArticleCard.vue';
import { MdEditor } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import MarkPreview from '../utils/MarkPreview.vue';
import YearProgress from './YearProgress.vue';
import HistoricalToday from './HistoricalToday.vue';
const dailyLog = reactive({
    'id': 111,
    'content': "#asadasdsad"
});

</script>

<style scoped lang="scss">
.daily-logs {
    display: flex;
    width: calc(100vw - 400px);
    // margin-top: 2%;
    // border: solid 1px red;

    .daily-log-aside {
        margin-left: 1%;
        width: 23%;

        .el-card {
            margin-left: 2%;
            // margin-top: 10px;
            width: 96%;
        }
    }

    .daily-log-main {
        // border: solid 1px red;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-left: 1%;
        // justify-content: center;
        width: 100%;
        // 卡片样式
        /* 添加阴影效果，增强立体感 */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        /* 设置背景颜色 */
        background-color: #fff;

        .daily-log {
            margin: 10px 10px;
            width: 30%;
            // height: 30px;
            // 磨砂玻璃化
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%), radial-gradient(at top center, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 80%) #989898;

            &:hover {
                margin: 20px 20px;
                transform: scale(1.1);
            }
        }
    }
}
</style>